<!doctype html>
<html>
  <head>
    <title>精英六人组</title>
    <meta name="description" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta
      name="viewport"
      content="initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <!--<link rel="icon" href="favicon.ico" />-->
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/eruda/3.0.0/eruda.min.js"></script> -->
    <!-- <script>eruda.init();</script> -->
    <!-- <script src="http://ovwyd2fb9.bkt.clouddn.com/console.js"></script> -->
    <style>
      html,
      body {
        overflow: hidden;
        margin: 0;
      }

      #wrapper {
        position: absolute;
        left: 0;
        width: 320px;
        text-align: center;
        top: 50%;
        left: 50%;
        margin-left: -160px;
        margin-top: -160px;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        transform: scale(2);
      }

      @import url('https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap');

      *,
      *::before,
      *::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        block-size: 100vh;
        display: grid;
        place-content: center;
        gap: 1rem;
        font-family: 'Lato', sans-serif;
        background-color: #000;
      }

      .text-container {
        display: flex;
        justify-content: center;
        block-size: min(10rem, 23vw);
        min-inline-size: 22.5rem;
      }

      .text-stroke {
        font-size: 92px;
        letter-spacing: 4px;
        fill: none;
        stroke: #fff;
        stroke-width: 2;
        stroke-dasharray: 100%;
        stroke-dashoffset: 100%;
        animation: textStrokeAnim 4000ms linear both;
        animation-iteration-count: 1;
      }

      .reset {
        width: max-content;
        margin-inline: auto;
        padding: 0.5em 1.25em;
        font-size: 1.5rem;
        border-radius: 1rem;
        border: 0;
        position: relative;
        background-color: hsl(49deg, 100%, 62%);
        color: #555;
      }

      .reset::after,
      .reset::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        transition: all 66ms ease;
      }

      .reset::after {
        box-shadow:
          0 0.25rem 0.5rem #0003,
          -0.124rem 0.5rem 0.45rem rgba(161, 158, 158, 0.133);
        opacity: 1;
      }

      .reset::before {
        box-shadow:
          inset 0 1px 0.5px 0px #777,
          inset 0 -2px 0.5px 0px #fff9,
          inset 0 4px 10px 0px #0007,
          inset 0 -4px 16px 0px #fff7;
        opacity: 0;
      }

      .reset:focus-visible {
        outline: 2px solid #0ebeff;
        outline-offset: 1px;
      }

      .reset:active {
        scale: 0.98;
      }

      .reset:is(:active, :focus-visible)::after {
        opacity: 0;
      }

      .reset:active::before {
        opacity: 1;
      }

      @keyframes textStrokeAnim {
        0% {
          stroke-dasharray: 100%;
          stroke-dashoffset: 100%;
          fill: #0000;
        }
        95% {
          stroke-dasharray: 0%;
          stroke-dashoffset: 90%;
          fill: #0000;
        }
        100% {
          stroke-dasharray: 0%;
          stroke-dashoffset: 0%;
          fill: #c6c7c9;
          filter: drop-shadow(2px 2px 10px #c6c7c9);
        }
      }

      h1,
      h2 {
        position: relative;
      }

      p {
        font-size: 14px;
        line-height: 2em;
        margin: 0;
        letter-spacing: 2px;
      }

      a {
        color: #999;
        text-decoration: none;
        transition: color 0.2s ease;
      }

      a:hover {
        color: #f33;
      }
    </style>
  </head>

  <body>
    <div id="wrapper">
      <main class="text-container">
        <svg
          class="text-stroke"
          viewBox="0 0 500 100"
          width="80%"
          height="100%"
        >
          <text class="text" x="20" y="75">精英六人组</text>
        </svg>
      </main>

      <p>
        <a href="./05-GW/index.html" target="_blank">高伟</a>
      </p>
      <p>
        <a href="./06-XF/index.html" target="_blank">高雄飞</a>
      </p>
      <p>
        <a href="./01-CT/index.html" target="_blank">林灿涛</a>
      </p>
      <p>
        <a href="./02-SZ/index.html" target="_blank">吴松镇</a>
      </p>
      <p>
        <a href="./03-LZ/index.html" target="_blank">陈龙珠</a>
      </p>
      <p>
        <a href="./郭雯演/git-index/html/index.html" target="_blank">郭雯演</a>
      </p>
    </div>
    <!--<canvas id="world"></canvas>
    <script src="./index.js"></script>-->
  </body>
</html>
